<template>
	<view class="exam">
		<view class="exam-area">
			<view class="exam-time">
				<view style="display: flex;align-items: center;">
					<view style="margin-right: 20rpx;">剩余时间</view>
					<uni-countdown color="#2E73FC" :showDay="false" :minute="30" :second="0" :fen.sync="fen"
						:miao.sync="miao" @timeup="timeup()">
					</uni-countdown>
				</view>
				<view class="submit" @click="submit">
					提交试卷
				</view>
			</view>
			<!-- 考试题 -->
			<view class="topic">
				<view class="type">
					<view>【{{showTopic.type}}题】</view>
					<view><text>{{inx+1}}</text><text style="font-size: 26rpx;color: #8890a5;">/{{ topicList.length }}</text></view>
				</view>
				<view style="margin-bottom: 60rpx; white-space: pre-line !important; word-break: break-all !important; word-wrap: break-word ;">
					<text style="margin-right: 10rpx;">{{inx+1}}.</text>
					{{showTopic.title}}
				</view>
				<view class="choose">
					<view :class="['box', clickA ? 'yes' : '']" @click="choose('A')">A</view>
					<view class="right">
						{{showTopic.A}}
					</view>
				</view>
				<view class="choose">
					<view :class="['box', clickB ? 'yes' : '']" @click="choose('B')">B</view>
					<view class="right">
						{{showTopic.B}}
					</view>
				</view>
				<view class="choose">
					<view :class="['box', clickC ? 'yes' : '']" @click="choose('C')">C</view>
					<view class="right">
						{{showTopic.C}}
					</view>
				</view>
				<view class="choose">
					<view :class="['box', clickD ? 'yes' : '']" @click="choose('D')">D</view>
					<view class="right">
						{{showTopic.D}}
					</view>
				</view>
			</view>
		</view>
		<view class="exam-btn">
			<view :class="['button', inx==0 ? 'bg' : 'bg2']" @click="prev">
				<image src="@/static/image/exam/left.svg">
					<text>上一题</text>
			</view>
			<view :class="['button', inx==topicList.length-1 ? 'bg' : 'bg2']" @click="next">
				<text>下一题</text>
				<image src="@/static/image/exam/right.svg">
			</view>
		</view>
		<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel" :title='title'
			content="提交后将无法更改答案,确定提交？" cancelText="取消" confirmText="确定"></xbd-popup>
	</view>
</template>

<script>
	import {
		Identify
	} from '@/api/index.js';
	export default {
		data() {
			return {
				fen: '',
				miao: '',
				title: '提交试卷',
				hackReset: true,
				flag: true,
				showDialog: false,
				clickA: false,
				clickB: false,
				clickC: false,
				clickD: false,
				topicList: [],
				trueAnswer: [],
				inx: 0,
				showTopic: {
					A: "",
					B: "",
					C: "",
					D: "",
					title: "",
					type: ""
				}
			};
		},
		watch: {},
		methods: {
			submit() {
				this.chooseWho()
				// console.log(this.fen,this.miao)
				console.log(this.trueAnswer, 'trueAnswer')
				this.showDialog = true
			},
			timeup() {
				this.chooseWho()
				console.log('时间到了')
				console.log(this.fen)
				console.log(this.miao)
				console.log(1800 - (this.fen * 60 + this.miao))
				this.showDialog = false
				this.$showToast('考试时间结束，已自动提交试卷');
				this.answer()
			},
			choose(val) {
				if (this.showTopic.type == '单选') {
					switch (val) {
						case "A":
							this.clickA = !this.clickA
							this.clickB = false
							this.clickC = false
							this.clickD = false
							break;
						case "B":
							this.clickA = false
							this.clickB = !this.clickB
							this.clickC = false
							this.clickD = false
							break;
						case "C":
							this.clickA = false
							this.clickB = false
							this.clickC = !this.clickC
							this.clickD = false
							break;
						case "D":
							this.clickA = false
							this.clickB = false
							this.clickC = false
							this.clickD = !this.clickD
							break;
					}
				} else {
					switch (val) {
						case "A":
							this.clickA = !this.clickA
							break;
						case "B":
							this.clickB = !this.clickB
							break;
						case "C":
							this.clickC = !this.clickC
							break;
						case "D":
							this.clickD = !this.clickD
							break;
					}
				}
			},
			chooseWho() {
				this.trueAnswer[this.inx] = ''
				if (this.clickA == true) {
					this.trueAnswer[this.inx] += 'A'
				}
				if (this.clickB == true) {
					this.trueAnswer[this.inx] += 'B'
				}
				if (this.clickC == true) {
					this.trueAnswer[this.inx] += 'C'
				}
				if (this.clickD == true) {
					this.trueAnswer[this.inx] += 'D'
				}
			},
			tab() {
				this.showTopic = this.topicList[this.inx]
				this.clickA = false
				this.clickB = false
				this.clickC = false
				this.clickD = false
				if (this.trueAnswer[this.inx]?.indexOf('A') !== -1) {
					this.clickA = true
				}
				if (this.trueAnswer[this.inx]?.indexOf('B') !== -1) {
					this.clickB = true
				}
				if (this.trueAnswer[this.inx]?.indexOf('C') !== -1) {
					this.clickC = true
				}
				if (this.trueAnswer[this.inx]?.indexOf('D') !== -1) {
					this.clickD = true
				}
				console.log(this.trueAnswer[this.inx], 'this.trueAnswer[this.inx]')
			},
			prev() {
				this.chooseWho()
				if (this.inx > 0) {
					this.inx = this.inx - 1
					this.tab()
				}
			},
			next() {
				this.chooseWho()
				if (this.inx + 1 < this.topicList.length) {
					this.inx = this.inx + 1
					this.tab()
				}
			},
			dialogConfirm() {
				console.log('确认')
				this.flag = false
				this.answer()
				this.showDialog = false

			},
			dialogCancel() {
				this.showDialog = false
			},
			async init() {
				const res = await Identify.getExamDetail(this.id)
				console.log(res)
				this.topicList = res.data.exam
				this.topicList.forEach((item, index) =>
					this.trueAnswer.push('')
				);
				this.showTopic = this.topicList[0]
				console.log(this.topicList, 'this.topicList')
				console.log(this.trueAnswer)
			},
			async answer() {
				const info = {
					id: this.id,
					answer: this.trueAnswer,
					use_time: 1801 - (this.fen * 60 + this.miao)
				}
				const res = await Identify.postExamAnswer(info)
				if (res.success) {
					uni.redirectTo({
						url: `/pages/identify/exam/result/result?id=${this.id}`,
					});
				} else {
					this.flag = true
				}
				console.log(res)
				this.$showToast(res.msg);
			}

		},
		onLoad(res) {
			this.id = res.id
			console.log(this.id)
			this.init()
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-countdown__number {
		font-size: 30rpx !important;
	}

	.exam {
		padding: 32rpx;

		.exam-area {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.exam-time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 50rpx;
			}

			.submit {
				box-sizing: border-box;
				height: 60rpx;
				padding: 0 30rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				color: #2E73FC;
				font-size: 28rpx;
				background-color: #E9F1FF;
			}

			.topic {
				font-size: 32rpx;
				font-weight: 700;
				text-align: left;
				color: #000623;

				.type {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
				}
			}

			.choose {
				display: flex;
				margin-bottom: 50rpx;

				.box {
					font-size: 36rpx;
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 50%;
					background: #f5f7fb;
					margin-right: 30rpx;
					text-align: center;
				}

				.yes {
					background: #2E73FC !important;
					color: #FFFFFF !important;
				}

				.right {
					white-space: pre-line !important;
					word-break: break-all !important;
					word-wrap: break-word;
					padding-top: 16rpx;
					font-size: 32rpx;
					width: 500rpx;
				}
			}
		}

		.exam-btn {
			display: flex;
			justify-content: space-between;
			margin-top: 100rpx;

			.button {
				width: 302rpx;
				height: 88rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;

				// background: url("/static/image/exam/next.svg") no-repeat;
				// background-size: 100% 100%;
				image {
					width: 44rpx;
					height: 32rpx;
					margin: 0 15rpx;
				}
			}

			.bg {
				background: url("/static/image/exam/prve.svg") no-repeat;
				background-size: 100% 100%;

			}

			.bg2 {
				background: url("/static/image/exam/next.svg") no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
